<!-- 客服 -->
<template>
	<view class="servicePage">
		<view v-if="sendshow3" style="padding: 20rpx;box-sizing: border-box;text-align: center;">
			<image style="max-width: 100%;" mode="widthFix" src="../../static/images/hq.jpg" show-menu-by-longpress="true"></image>
		</view>
		 <view class="server-line" v-for="(item,index) in firstdata" :key="index" v-if="showFirstdata">
			 <image src="../../static/kf.png"></image>
			 <view class="text">{{ item }}</view>
		 </view>
		 <view class="server-line" style="justify-content: flex-end;" v-if="isshowSend1">
			 <view class="text">{{ send1 }}</view>
			 <open-data type="userAvatarUrl" style="width: 60rpx;height: 60rpx;margin-left: 20rpx;"></open-data>
		 </view>
		 <view class="server-line" v-if="sendshow1">
			 <image src="../../static/kf.png"></image>
			 <view class="text"> 您家大约多少平 ? </view>
		 </view>
		 <view class="server-line" style="justify-content: flex-end;" v-if="isshowSend2">
				 <view class="text">{{ send2 }}</view>
				 <open-data type="userAvatarUrl" style="width: 60rpx;height: 60rpx;margin-left: 20rpx;"></open-data>
		 </view>
		 <view class="server-line" v-if="sendshow2">
			 <image src="../../static/kf.png"></image>
			 <view class="text"> {{ endtext }} </view>
		 </view>
		 <!-- <view class="server-line" style="align-items: flex-start;" v-if="sendshow2">
			 <image src="../../static/kf.png"></image>
			 <view class="text"> <image src="../../static/images/u77.jpg" show-menu-by-longpress="true" mode="widthFix" style="width: 500rpx;margin: 0;"></image></view>
		 </view> -->
		<!-- <view class="server-line" v-if="sendshow3">
			 <image src="../../static/kf.png"></image>
			 <view class="text"> {{ sqext }} </view>
		 </view> -->
		
		 <view class="button-link" >
			 <view class="link" v-if="bt1">
				 <view class="item" v-for="(item,index) in buttonmenu1" :key="index" @tap="clickButton1(item)">{{ item }}</view>
			 </view>
			 <view class="link" v-if="bt2">
			 	<view class="item" v-for="(item,index) in buttonmenu2" :key="index" @tap="clickButton2(item)">{{ item }}</view>
			 </view>
			 <!-- //获取用户微信绑定的手机号码 -->
			 <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="showGetuserinfo">免费领取装修设计/实景案例</button>
		 </view>
		 <!-- 拒绝弹框 -->
		 <view class="refuse-remark" v-if="isrefuse">
		 	<view class="box">
		 		<view class="tit">价值41000元装修礼包</view>
		 		<view>1、免全屋装修设计费</view>
		 		<view>2、免施工管理费</view>
		 		<view>3、免开荒保洁费</view>
		 		<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键抢占优惠名额</button>
		 	    <image src="../../static/close.png" class="close" @tap="close"></image>
		 	</view>
		 </view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				showFirstdata:true,
				sendshow1:false,
				sendshow2:false,
				sendshow3:false,
				bt1:true,
				bt2:false,
				firstdata:['您好，沪尚茗居客服小茗很高兴为您服务。','请问您打算做什么装修项目'],
				send1:'',
				send2:'',
				isshowSend1:false,
				isshowSend2:false,
				buttonmenu1:['新房装修','二手房装修','老房翻新'],
				buttonmenu2:['50㎡~80㎡','80㎡~120㎡','120㎡以上'],
				showGetuserinfo:false,
				endtext:'好哒，已了解，您下方授权手机号码，我们将为您提供全屋实景案例，免费为您户型设计的服务',
				miniprogramcode:'',
				signature:'',
				rawData:'',
				avatarUrl:'',
				sqext:'已收到您的手机号，我们工作人员会马上与您取得联系~',
				access_token:'',
				click_id:'',
				weixinadinfo:'',
				weixinadkey:'',
				isshowq:false,
				isrefuse:false
			};
		},
		onLoad(e){
			console.log(e)
			this.click_id  = e.click_id;
			this.weixinadinfo = e.weixinadinfo;
			this.weixinadkey = e.weixinadkey
			this.isshowq = e.type   // type ==1  已授权过手机号   type == 2 第一次授权手机号
		},
		onShow() {
			if(this.isshowq == 1){
				this.sendshow3 = true;
				this.showFirstdata = false;
				this.bt1 = false;
				this.bt2 = false;
			}
			//  this.avatarUrl = uni.getStorageSync('avatarUrl')
		},
		methods:{
			close(){
				this.isrefuse = false
			},
			getPhoneNumber(e) {
				let that = this;
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
                    let param = {
                    	encryptedData:e.detail.encryptedData,
                    	iv:e.detail.iv,
                    	session_key:uni.getStorageSync('wxSessionkey'),
						openid:uni.getStorageSync('openid'),
                    	flag:2
                    }
                    uni.request({
                    	url: 'https://xcx.mingjugroup.net/index/getInfo',
                    	method: 'POST',
                    	header: {
                    		'content-type': 'application/x-www-form-urlencoded',
                    		'Access-Control-Allow-Origin': '*'
                    	},
                    	data: param,
                    	success: res => {
							if(res.data.errcode == 0){
								 that.isrefuse = false;
								 that.showGetuserinfo = false;
								 uni.setStorageSync('phoneNumber', res.data.data.phoneNumber);
								 console.log(that.click_id,'click_id1')
								 if(that.click_id){
									 console.log(that.click_id,'click_id2')
									 that.getaccessToken()
								 }
								
							}else{
								uni.showToast({
								    title: res.data.errmsg,
								    duration: 2000
								});
							}
                    	},
                    	fail: (err) => {
							uni.showToast({
							    title: '获取失败，请稍后重试',
							    duration: 2000
							});
                    	}
                    })
				} else {
					this.isrefuse = true
                    let param = {openid:uni.getStorageSync('openid')}
                      uni.request({
                      	url: 'https://xcx.mingjugroup.net/index/deny',
                      	method: 'POST',
                      	header: {
                      		'content-type': 'application/x-www-form-urlencoded',
                      		'Access-Control-Allow-Origin': '*'
                      	},
                      	data: param,
                      	success: res => {
                      		if(res.data.errcode == 0){
                    		}
                      	},
                      	fail: (err) => {
                      		
                      	}
                      })
				}
			},
			getaccessToken(){
				uni.request({
					url: 'https://xcx.mingjugroup.net/index/getAccessToken',
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Access-Control-Allow-Origin': '*'
					},
					data: {flag:2},
					success: res => {
						if(res.data.errcode == 0){
							this.access_token = res.data.data.access_token;
							this.advhc();
						}else{
							uni.showToast({
							    title: res.data.errmsg,
							    duration: 2000
							});
						}
						
						console.log(res,'access_token')
						
					},
					fail: (err) => {
						uni.showToast({
						    title: '获取accesstoken失败，请稍后重试',
						    duration: 2000
						});
					}
				})
			},
			// 回传
			advhc(){
				let that = this;
				uni.request({
					url: `https://xcx.mingjugroup.net/index/uploadReservation?access_token=${that.access_token}`,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Access-Control-Allow-Origin': '*'
					},
					data: {flag:2,click_id:that.click_id,weixinadinfo:that.weixinadinfo,weixinadkey:that.weixinadkey},
					success: res => {
						this.isrefuse = false
						console.log(res,'huichuan')
					},
					fail: (err) => {
						uni.showToast({
						    title: '回传失败',
						    duration: 2000
						});
					}
				})
			},
			clickButton1(item){
				this.isshowSend1 = true;
				this.send1 = item;
				if(item == '新房装修'){
					this.showGetuserinfo = true;
					this.sendshow2 = true;
					this.bt1 = false;
				}else{
					this.sendshow1 = true;
					this.bt1 = false;
					this.bt2 = true;
				}
			},
			clickButton2(item){
				this.isshowSend2 = true;
				this.send2 = item;
				this.sendshow2 = true;
				this.bt1 = false;
				this.bt2 = false;
				this.showGetuserinfo = true
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #f8f8f8;
	}
	.servicePage{
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		 .server-line{
			 display: flex;
			 align-items: center;
			 margin-bottom: 30rpx;
			 image{
				 	width: 60rpx;
				 	height: 60rpx;
					margin-right: 10rpx;
			 }
			 .text{
				 text-align: left;
				 word-wrap: break-word;
				 padding: 10rpx 24rpx;
				 max-width: 560rpx;
				 border-radius: 10rpx;
				 font-size: 28rpx;
				 background: #fff;
				 border: 1px solid #e8e8e8;
			 }
		 }
		 .button-link{
			 background: #fff;
			 position: fixed;
			 bottom: 0;
			 padding: 20rpx 20rpx 40rpx;
			 box-sizing: border-box;
			 width: 100%;
			 left: 0;
			 .link{
				 display: flex;
				 align-items: center;
				 .item{
						 -webkit-box-flex: 1;
						 -ms-flex: 1;
						 flex: 1;
						 border-radius: 10rpx;
						 padding: 16rpx 20rpx;
						 overflow: hidden;
						 text-overflow: ellipsis;
						 white-space: nowrap;
						 margin: 24rpx 12rpx 0;
						 color: #fff;
						 background-color: #338aff;
						 font-size: 28rpx;
						 font-weight: 400;
						 line-height: 40rpx;
						 text-align: center;
				 }
			 }
			 button{
				 background: #338aff;
				 color: #fff;
				 font-size: 32rpx;
				 animation: shake_f1fde 2.5s infinite;
			 }
			 
		 }
		

	}
	@keyframes shake_f1fde{
		0%,35%{
			transform:rotate(0deg)
		}
		5%,15%,25%{
			transform:rotate(-3deg)
		}
		10%,20%,30%{
			transform:rotate(3deg)
		}
	}
	
</style>
